<template>
  <div class="plat-container">
    <div class="plat-top">
      <span>系统消息</span>
      <el-button @click.native="handleClick">添加</el-button>
    </div>
    <div class="plat-bottom">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column type="index" label="序号" width="180"></el-table-column>
        <el-table-column prop="msg_title" label="标题" width="180"></el-table-column>
        <el-table-column prop="msg_type" label="消息"></el-table-column>
        <el-table-column prop="msg_content" label="内容"></el-table-column>
        <el-table-column prop="address" label="操作">
          <template slot-scope="scope">
            <el-button class="delete" @click="deleteMessage(scope)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <Pagination class="pagination" :total="total" @currentChange="handleCurrentChange" :pageSize="pageSize"></Pagination>
  </div>
</template>

<script>
import { getMessageList, deleteMessage} from "@/api/operation";
import { ERR_OK } from "@/api/config";
import {Message} from 'element-ui'
import Pagination from '@/common/pagination/pagination'
export default {
  data() {
    return {
      tableData: [],
      total: 0,
      page : 1,
      pageSize: 0
    };
  },
  methods: {
    handleCurrentChange(val) {
      this.page = val
      this._getMessageList(this.page)
    },
    deleteMessage(scope) {
      deleteMessage(scope)
        .then((res) => {
          if (res.code == ERR_OK) {
            Message({
              message: res.message
            })
            this.deleteItem(scope.row.id)
          }
        })
      // deleteMessage()
    },
    handleClick() {
      this.$router.push({ path: "/platform/messageInform/add" });
    },
    deleteItem(id) {
      let index = this.tableData.findIndex((item) => {
        return item.id === id
      })
      if (index >=0) {
        this.tableData.splice(index, 1)
      }
    },
    _getMessageList(page) {
      getMessageList(page)
        .then(res => {
          if (res.code == ERR_OK) {
            let ret = res.data;
            console.log(ret);
            this.tableData = ret.list.data;
            this.total = ret.list.total
            this.pageSize = ret.list.per_page
          }
        })
        .catch(res => {
          console.log(res);
        });
    }
  },
  created() {
    this._getMessageList();
  },
  components: {
    Pagination
  }
};
</script>

<style lang="scss" scoped>
@import "@/common/scss/index.scss";
.plat-container {
  padding: 20px;
  padding-top: 50px;
  width: 100%;
  position: relative;
  .plat-top {
    width: 100%;
    height: 71px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .plat-bottom{
    margin-bottom: 30px;
  }
  .pagination{
    @include hCenter();
    bottom: 0;
    background: #fff;
    z-index: 99;
  }
}
</style>
